<template>
    <!-- canvas 艺术字配置 -->
    <div class="prop-canvas-text">
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="id">{{ data.id }}</el-form-item>
            <el-form-item label="画布宽度">
                <el-button type="primary" @click="getParentWidth()">重新获取父元素宽度</el-button>
            </el-form-item>
            <el-form-item label="画布高度" class="margin">
                <div class="item">
                    <span>height：</span>
                    <el-input-number v-model="data.options.canvasHeight" placeholder="高度" :controls="false" :min="30" :max="500"></el-input-number>
                    <span class="unit">(px)</span>
                </div>
            </el-form-item>
            <el-form-item label="缩放比例">
                <div class="item">
                    <span>X：</span>
                    <el-input-number v-model="data.options.scale.x" placeholder="x" :controls="false"></el-input-number>
                    <span class="unit">(100%)</span>
                </div>
                <div class="item">
                    <span>Y：</span>
                    <el-input-number v-model="data.options.scale.y" placeholder="y" :controls="false"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label="基线对齐">
                <el-radio-group class="fit" v-model="data.style.textBaseline" size="mini">
                    <el-radio-button label="top">top</el-radio-button>
                    <el-radio-button label="hanging">hanging</el-radio-button>
                    <el-radio-button label="middle">middle</el-radio-button>
                    <el-radio-button label="alphabetic">alphabetic</el-radio-button>
                    <el-radio-button label="ideographic">ideographic</el-radio-button>
                    <el-radio-button label="bottom">bottom</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="测试文字">
                <el-input v-model.trim="data.options.content"
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    placeholder="艺术字文字"
                    show-word-limit
                    maxlength="50">
                </el-input>
            </el-form-item>
            <el-form-item label="绑定字段">
                <el-input v-model.trim="data.options.contentField" type="textarea" :rows="4" placeholder="根据Api配置绑定字段，例如: 0:name"></el-input>
            </el-form-item>
            <el-form-item label="获取值">
                <el-button type="primary" @click="getContentField()">获取绑定字段接口数据</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { warning } from '@/utils/errorInfo';
export default {
    name: "PropCanvasText",
    props: {
        data: {
            type: Object
        },
        Api: {
            type: Object
        }
    },
    methods: {
        getContentField() {
            if (this.data.options.contentField && this.data.options.contentField.length > 0) { // 已经绑定接口数据
                let contentField = this.data.options.contentField.split(':');
                let data = this.Api.options[Number(contentField[0])]?.testData || null;
                if (data) { // 接口有返回数据
                    this.data.options.content = data?.[contentField[1]] || '';
                } else {
                    warning('接口无返回数据');
                }
            } else {
                warning('暂无绑定接口');
            }
        },
        getParentWidth() { // 重新获取父级元素
            this.data.options.canvasWidth--;
        }
    }
}
</script>
